<template>
	<view class="wanl-order-list">

		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px'
			}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0;" @tap="$wanlshop.back(1)"></text>
				</view>		
				<view class="search-form round" >
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input @confirm="confirm" :adjust-position="false" type="text" v-model="search" placeholder="输入搜索的商品" confirm-type="search"></input>
				</view>
			</view>
		</view>
		
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何商品"v-if="tag.loaded === true && tag.productList.length === 0"/>
					<!-- 商品列表 -->
					<view v-for="(goods, index) in tag.productList" :key="index" class="order-item radius-bock">
						<view class="goods-box">
							<view class="cu-avatar xl margin-right-bj radius" :style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										{{goods.title}}
									</view>
								</view>
								<view class="parameter">
									<view class="text-price text-red">
										{{ goods.price }}
									</view>
								</view>
							</view>
						</view>
						<!-- 底部 -->
						<view class="action-box padding-bottom-bj">
							<button class="cu-btn round line-black margin-lr-bj" @tap="edit(goods)">编辑</button>
							<button class="cu-btn round wanl-bg-orange" v-if="goods.status == 'normal'" @tap="deleteProduct(goods.id)">下架</button>
							<button class="cu-btn round wanl-bg-orange" v-if="goods.status == 'hidden'" >已下架</button>
						</view>
						
					</view>
					<uni-load-more :status="tag.loadingType" :content-text="contentText"/>
					<view class="edgeInsetBottom"></view> 
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
		
		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		<view class="wanlfind-add-container__foot">
			<view class="cu-bar tabbar foot flex flex-direction bg-white align-end justify-center padding-right-bj padding-top-bj">
				<!-- <button class="cu-btn bg-red lg " @tap="$wanlshop.to('/pages/business/add')"> -->
				<button class="cu-btn bg-red lg " @tap="gotoaddproduct">
					添加商品
				</button>
			</view>
		</view>
	</view>	
</template>

<script>
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					status:'all',
					text: '所有',
					loadingType: 'more',
					current_page: 1,
					productList: []
				},
				{
					state: 1,
					status:'normal',
					text: '在售中',
					loadingType: 'more',
					current_page: 1,
					productList: []
				},
				{
					state: 2,
					status:'hidden',
					text: '已下架',
					loadingType: 'more',
					current_page: 1,
					productList: []
				}
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
			search:'',
		};
	},

	onLoad(options) {	
		if (!options.state) {
			options.state = 0;
		}
		this.tabCurrentIndex = +options.state;
		// #ifndef MP
		this.loadData();
		// #endif
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
		}
		// #endif
	},
	
	onShow(){
		this.loadData();
	},
	methods: {
		
		gotoaddproduct(){
			let that = this;
			//判断当前的商家是哪一个类型的，跳转到不同的商家模板
			uni.request({
				url:"/wanlshop/shop/checkShopType",
				method:"POST",
				success(res){
					console.log(res);
					if(res.data.tag == 1){
						that.$wanlshop.to("/pages/business/clothadd")
					}else if(res.data.tag == 2){
						that.$wanlshop.to("/pages/business/add")
					}else if(res.data.tag == 3){
						that.$wanlshop.to("/pages/business/commonadd")
					}
				
				}
			})
		},
		
		
		
		
		//获取商品列表
		async loadData(source) {
			console.log(source)
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			let status = navItem.status;
				
			if(source !== 'search'){
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
			}	
			navItem.loadingType = 'loading';
			// 获取列表
			await uni.request({
				url: '/wanlshop/product/shopGoodsList',
				data: {
					status:status,
					search:this.search,
					page: navItem.current_page
				},
				success: res => {
					navItem.current_page = res.data.current_page; //当前页码
					if (res.data.last_page === res.data.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					if(source === 'search'){
						navItem.productList =  res.data.data
					} else{
						let productList = res.data.data.filter(item => {
							//添加不同状态下订单的表现形式
							item = Object.assign(item, this.productStateExp(item.status));
							//演示数据所以自己进行状态筛选
							if (status === 'all') {
								//0为全部订单
								return item;
							}
							return item.status === status;
						});
						productList.forEach(item => {
							navItem.productList.push(item);
						});
					}
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},
		
		//编辑
		edit(item){
			if(item.specs == "single"){
				uni.navigateTo({
					url:'/pages/business/add?detail='+JSON.stringify(item)
				})
			}else if(item.specs == 'multi'){
				uni.navigateTo({
					url:'/pages/business/clothadd?edit=1&detail='+JSON.stringify(item)
				})
			}else{
				uni.navigateTo({
					url:'/pages/business/commonadd?edit=1&detail='+JSON.stringify(item)
				})
			}
			
	
		},
		//删除
		deleteProduct(id){
			let that = this;
			uni.request({
				url: '/wanlshop/product/delProduct', 
				method: 'POST',
				data: {id:id},
				success: res => {
					// 提示
					setTimeout(()=>{
						this.loadData("search");
					},500);
					that.$wanlshop.msg('下架成功');
				}
			});
		},
		
		//搜索
		confirm(event){
			this.search = event.detail.value;
			console.log(this.search)
			this.loadData('search');
		},
		
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},		
		//商品状态文字和颜色
		productStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333';
			switch (+state) {
				case 1:
					stateTip = '在售中';
					stateTipColor = '#f40';
					break;
				case 2:
					stateTip = '已下架';
					break;
			}
			return {
				stateTip,
				stateTipColor
			};
		},
	
		
	}
};
</script>

<style>
page {
	height: 100%;
}
.search-form{
	background-color: #ebebeb !important;
}
</style>
